<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>优惠卷详情</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- px布局 -->
    <!-- <link rel="stylesheet" href="index.css" />  -->
    <!-- rem布局 -->
    <link rel="stylesheet" href="indexrem.css">
  </head>
  <body>
    <div id="app">
      <div class="coupon-detail">
        <div class="info-news">
          <div class="news-left">
            <div class="news-icon"><img :src="info.icon" alt=""></div>
            <div class="news-text">
              <div class="title">{{info.title}}</div>
              <div class="desc">{{info.desc}}</div>
            </div>
          </div>
          <div class="news-right">
            <span> ￥ </span>{{info.price}}
          </div>
        </div>
        <div class="info-use">
            <div class="use-header">使用须知</div>
            <div class="invalid">
                <div class="invalid-label">有效期:</div>
                <div class="invalid-value">{{info.startTime}} 至 {{info.endTime}}</div>
            </div>
            <div class="invalid">
                <div class="invalid-label">限用:</div>
                <div class="invalid-value">单次限用{{info.count}}张</div>
            </div>

        </div>
        <div class="use-store">
            <div class="store-header">
                <div class="store-left">可用门店 ({{info.store.length}})</div>
                <div class="opation" @click="open">
                    <span>{{isOpen?"收起":"展开"}}</span>
                    <img :src="isOpen?'../image/to-top1.png':'../image/to-bottom1.png'" alt="">
                </div>
            </div>
            <div class="store-content" v-if="isOpen">
                <div class="store-item" v-for="(item,index) in info.store" :key="index">
                    <div class="store-name">{{item.name}}</div>
                    <div class="store-address">地址: {{item.address}}</div>
                </div>
            </div>
        </div>
        <div class="qr-code">
            <div class="qr-code-img"><img :src="info.qrCode" alt=""></div>
            <div class="code">{{info.code}}</div>
            <div class="bar-code-img"><img :src="info.barCode" alt=""></div>
        </div>
      </div>
    </div>

    <script>
      var vm = new Vue({
        el: "#app",
        data() {
          return {
              isOpen: true,
              info: {
                  icon: "http://qiniuaccess.yiduokj.com/brandUser/add/20201219150308101.png",
                title: "咏轩100元项目抵用券",
                desc: "暂无简介信息",
                price: "100",
                startTime: "2020-11-24 13:21:34",
                endTime: "2021-03-24 13:21:34",
                count: 1,
                store: [
                    {
                        name: "咏轩美容美发001店",
                        address: "清芬小区A区门面1层50室"
                    },
                    {
                        name: "咏轩美容美发007店",
                        address: "咏轩美容美发009店三曙街广货巷37号"
                    }
                ],
                qrCode: "http://qiniuaccess.yiduokj.com/brandUser/add/20201219150333101.png",
                barCode: "http://qiniuaccess.yiduokj.com/brandUser/add/20201219150352101.png",
                code:"5fbc985ee342724b7cfc3295"
              },
          };
        },

        methods: {
            open() {
                this.isOpen = !this.isOpen;
            }
        }
      });
    </script>
  </body>
</html>
